<template>
  <div ref="wrap">
    <a-modal
      :width="600"
      :visible="visible"
      @cancel="handleClose"
      :footer="null"
      wrapClassName="vip-pay-modal"
      centered
      :zIndex="99999"
      :maskClosable="false"
      :bodyStyle="{
        padding: 0,
        borderBottomLeftRadius: '10px',
        borderBottomRightRadius: '10px',
        overflow: 'hidden',
      }"
      :closable="false"
    >
      <template #closeIcon>
        <CloseOutlined style="color: #fff; font-size: 22px" />
      </template>
      <div class="activate_member_ship">
        <div class="top_bar">
          <div class="close-button" @click="handleClose">
            <CloseOutlined />
          </div>
          <div class="left_team_con" v-if="currentTeamInfo.name">
            <div class="left_avatar" v-if="!isTeam">
              <img :src="currentTeam.avatar"/>
            </div>
            <div class="left_avatar" v-else>
              {{
                currentTeamInfo.name && currentTeamInfo.name.length > 0
                  ? currentTeamInfo.name.slice(0, 1)
                  : ""
              }}
            </div>
            <div class="right_name">
              <div class="top_user">
                <!-- 当前用户 ：
                <span style="margin-left: 1px">{{ currentTeam.name }}</span> -->
                {{isTeam?'当前团队':'当前用户'}}：{{ isTeam?currentTeamInfo.name:currentTeam.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="tab_main">
          <div class="pay_con" v-if="currentPayInfo.money">
            <div class="left_ercode_2">
              <img
                style="width: 100%; height: 100%"
                :src="payQrCodeUrl"
                alt=""
              />
            </div>
            <div class="right_choose_pay">
              <div class="pay_total">
                <div class="pay_title">应付金额：</div>
                <div class="pay_value">
                  ￥{{
                    rechargeData?.option?.money ||
                    rechargeData?.validityData?.money
                  }}
                </div>
              </div>
              <div class="pay_methods">
                <div class="methods_tab">
                  <div class="pay_title">支持支付方式：</div>
                  <div
                    class="methods_item"
                    @click="tabChange(index, item, 'pay')"
                 
                    v-for="(item, index) in payMethods"
                    :key="index"
                  >
                    <img
                      :src="item.icon"
                      style="
                        width: 20px;
                        height: 20;
                        border-radius: 10px;
                        overflow: hidden;
                      "
                      alt=""
                    />
                    <div class="fs-12">{{ item.tab_name }}</div>
                  </div>
                </div>
              </div>
              <div class="bottom_box">
                <div class="left_agree">
                  <a-button
                    style="padding: 0"
                    type="link"
                    @click="vipVisible = true"
                    target="_blank"
                    class="text-gray-9 agreement-link"
                    >支付即视为您同意<span class="text-orange"
                      >《会员服务协议》</span
                    ></a-button
                  >
                </div>
                <div class="right_cutdown" v-if="cutdownVal">
                  剩余支付时间:
                  <span style="color: red">{{ cutdownVal }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>

    <a-modal
      :visible="ercodeVisible"
      title="联系客服"
      :width="500"
      centered
      @cancel="ercodeVisible = false"
      :zIndex="1002"
      :footer="null"
    >
      <div class="flex justify-center">
        <div style="width: 200px; height: 200px">
          <img :src="contact_url" class="w-full h-full" v-if="contact_url" />
        </div>
      </div>
    </a-modal>
    <ProtocolModal
      :visible="vipVisible"
      titleTxt="会员服务协议"
      :content="pay_agreement_url"
      @onClose="vipVisible = false"
    ></ProtocolModal>
  </div>
</template>

<script>
import { computed, defineComponent, reactive, ref, toRefs, watch } from "vue";
import {
  CrownOutlined,
  CloseOutlined,
  LeftOutlined,
  RightOutlined,
  SwapOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import request from "@/common/utils/request.js";
import { useRouter } from "vue-router";
import store from "@/store/index.js";
import utils from "@/common/utils/utils.js";
import TeamSlider from "@/components/TeamSlider/index.vue";
import weixinIcon from "@/common/image/weixin_icon.png";
import alipayIcon from "@/common/image/alipay_icon.png";
import ProtocolModal from "@/components/ProtocolModal/Index.vue";

export default defineComponent({
  components: {
    // CrownOutlined,
    CloseOutlined,
    LeftOutlined,
    RightOutlined,
    SwapOutlined,
    TeamSlider,
    ProtocolModal,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    type: {
      type: Number,
      default: 0,
    },
    currentTab: {
      type: Number,
      default: 0,
    },
    isTeam: {
      type: Number,
      default: 0,
    },
    rechargeData: {
      type: Object,
      default: () => {},
    },
  },

  setup(props, context) {
    const router = useRouter();
    let currentTeamInfo = computed(() => {
      return store.state.user.teamList.find((item) => item.id == utils.getCurrentTeam());
    })
    const state = reactive({
      vipVisible: false,
      tabList: [],
      secondTab: [],
      payMethods: [
        {
          tab_name: "微信支付",
          icon: weixinIcon,
          tab_id: 0,
        },
        {
          tab_name: "支付宝",
          icon: alipayIcon,
          tab_id: 0,
        },
      ],
      secondIndex: 0,
      currentIndex: 0,
      packageIndex: 0,
      payIndex: 0,
      packageSetList: [],
      currentPackageSet: {},
      currentPayInfo: {
        money: 10,
      },
      maxTime: 10 * 60,
      timer: null,
      cutdownVal: "",
      contact_url: "",
      pay_agreement_url: "",
      payQrCodeUrl: "",
      checkPayTimer: null,
      currentTeam: {},

      showMemberVisible: false,
      teamList: [],
      ercodeVisible: false,
      scrollLeftArrActive: false,
      isBusiness: 0,
      showMemberTeam: false,
    });

    const closeVipModal = () => {
      state.vipVisible = false;
    };

    const tabChange = (index) => {
      if (state.payIndex == index) return;
      state.payIndex = index;
    };

    const handleClose = () => {
      context.emit("close");
    };

    const getQrCodeUrl = () => {
      let params = {
        qrCode: props.rechargeData?.payUrl,
      };
      request.get("/public", "/qrcode", params).then((result) => {
        state.payQrCodeUrl = result.url;

        const params = new URLSearchParams(props.rechargeData?.payUrl);
        const orderId =
          params.get("tmp_order_id") || props.rechargeData?.order_id;
        checkPayHandle(orderId);
      });
    };

    const checkPayHandle = (order_id) => {
      state.checkPayTimer = setInterval(() => {
        request
          .get("/work_ai", "/order/shotstack/getOrderStatus", {
            order_id: order_id,
          })
          .then((checkResult) => {
			  if(checkResult.status == 4){
				  message.success("订单超时已取消");
				  context.emit("close");
			  } else if (checkResult.status  ==  1) {
				clearInterval(state.checkPayTimer);
				store.dispatch("GetVersionInfo");
				message.success("支付成功，即将跳转");
				setTimeout(() => {
					handleClose();
					router.push({ name: "MediaBusinessRecord" });
				}, 1000);
            }
          });
      }, 2000);
    };

    const getConfig = () => {
      request.get("/work_ai", "/config").then((res) => {
        if (res.list && res.list.pay_agreement_url) {
          state.pay_agreement_url = res.list.pay_agreement_url;
        }
      });
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          if (props.rechargeData?.payUrl) {
            getQrCodeUrl();
          }
          getConfig();
          utils.getUserInfo().then((userInfo) => {
            if (userInfo.avatar) {
              state.currentTeam.name = userInfo.nickname;
              state.currentTeam.avatar = userInfo.avatar;
              state.currentTeam.user_id = userInfo.id;
            }
          });
        } else {
          clearInterval(state.checkPayTimer);
        }
      }
    );

    return {
      ...toRefs(state),
      tabChange,
      handleClose,
      closeVipModal,
      currentTeamInfo,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-modal-content) {
  border-radius: 10px;
}

.activate_member_ship {
  // height: 642px;
  width: 100%;
  background-color: #fff;

  .top_bar {
    width: 100%;
    height: 70px;
    background-color: #292d42;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;

    .close-button {
      position: absolute;
      top: 18px;
      right: 20px;
      color: #fff;
      font-size: 20px;
      cursor: pointer;

      &:hover {
        color: @primary-color;
      }
    }

    .left_team_con {
      display: flex;
      align-items: center;
      margin-left: 20px;

      .left_avatar {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background-color: var(--ss-primary-color);
        color: #fff;

        img {
          width: 36px;
          height: 36px;
          border-radius: 50%;
        }
      }

      .team-avatar-box {
        width: 36px;
        height: 36px;
        background-color: #1890ff;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 16px;
      }

      .right_name {
        margin-left: 10px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;

        .top_user {
          display: flex;
          align-items: center;
        }
      }
    }

    .right_tips {
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #e6e6e6;
      margin-right: 200px;
    }
  }

  .tab_con {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #292d42;

    .tab_item {
      width: 33.3%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: PingFang SC;
      color: #fff;
      font-weight: bold;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      background-color: #64677c;
      font-size: 16px;
      cursor: pointer;
      margin-left: 2px;

      &.active {
        background-color: #7a46fc;
      }

      &:nth-child(1) {
        margin-left: 0;
      }
    }
  }

  .tab_main {
    width: 100%;
    // height: calc(100% - 112px);
    background-color: #f2f2f2;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    border-radius: 10px;
    overflow: hidden;

    .pay_con {
      padding: 20px;
      width: 100%;
      height: 131px;
      background: #f9f9fa;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-top: 20px;
      margin-bottom: 20px;

      .left_ercode_2 {
        width: 106px;
        height: 104px;
        // border: 1px solid #292D42;
      }

      .right_choose_pay {
        padding-left: 20px;
        width: calc(100% - 200px);

        .pay_methods {
          .methods_tab {
            display: flex;
            align-items: center;
            .pay_title{
              color: #999999;
            } 
            .methods_item {
            
              
              border-radius: 5px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-left: 10px;
              cursor: pointer;
             
              &:nth-child(1) {
                margin-left: 0;
              }

              &.pay_active {
                border: 0;
                background-image: url("@/common/image/pay_selected.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
              }
            }
          }
        }

        .pay_total {
          display: flex;
          align-items: center;
        

          .pay_title {
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
          }

          .pay_value {
            font-size: 24px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #f2372e;
            margin-left: 10px;
          }

          .pay_tips {
            background: rgba(242, 55, 46, 0.1);
            border-radius: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #f2372e;
            padding: 0px 10px;
            margin-left: 10px;
          }
        }

        .bottom_box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 15px;

          .left_agree {
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
          }

          .right_cutdown {
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
          }
        }
      }
    }
  }
}
</style>
<style>
.vip-pay-modal .ss-modal-content {
  padding: 0!important;
}
</style>

